<template>
    <section>
        <van-tabbar active-color="#fff" inactive-color="#fff" @change="tabbar_switch" v-model="active" route>
            <van-tabbar-item to="/index">
                <span>{{$t('bottom.navThree[0]')}}</span>
                <template #icon="props">
					<!-- <img src="../assets/images/fuli.png" alt=""> -->
                   <img src="../assets/img/home_hover.png" alt="" v-if="props.active">
                    <img src="../assets/img/home.png" alt="" v-else>
                </template>
            </van-tabbar-item>
            <!-- <van-tabbar-item to="/exchange" >
                <span>{{$t('bottom.navThree[1]')}}</span>
                <template #icon="props">
					<img src="../assets/img/discount_hover.png" alt="" v-if="props.active">
					 <img src="../assets/img/discount.png" alt="" v-else>
                </template>
            </van-tabbar-item> -->
            <van-tabbar-item to="/active">
                <span>{{$t('bottom.navThree[2]')}}</span>
                <template #icon="props">
                    <!-- <img src="~path_img/foot1ona.png" alt="" v-if="props.active">
                    <img src="~path_img/foot1a.png" alt="" v-else> -->
					<!-- <img src="../assets/images/shouye.png" alt=""> -->
					<img src="../assets/img/promotion_hover.png" alt="" v-if="props.active">
					 <img src="../assets/img/promotion.png" alt="" v-else>
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/serviceCenter">
                <span>{{$t('bottom.navThree[3]')}}</span>
                <template #icon="props">
                <!--    <img src="~path_img/foot1ona.png" alt="" v-if="props.active">
                    <img src="~path_img/foot1a.png" alt="" v-else> -->
					<!-- <img src="../assets/images/gengduo.png" alt=""> -->
					<img src="../assets/img/chat_hover.png" alt="" v-if="props.active">
					 <img src="../assets/img/chat.png" alt="" v-else>
                </template>
            </van-tabbar-item>
            <van-tabbar-item to="/person">
                <span>{{$t('bottom.navThree[4]')}}</span>
                <template #icon="props">
                  <!--  <img src="~path_img/foot5on.png" alt="" v-if="props.active">
                    <img src="~path_img/foot5.png" alt="" v-else> -->
					<!-- <img src="../assets/images/wode.png" alt=""> -->
					<img src="../assets/img/member_hover.png" alt="" v-if="props.active">
					 <img src="../assets/img/member.png" alt="" v-else>
                </template>
            </van-tabbar-item>
        </van-tabbar>

        <kefu :show="kefu_show" :s_show="s_show" @fun_kefu_x="fun_kefu_x"></kefu>
    </section>




</template>

<script>
import kefu from '@/components/kefu';
import { Tabbar,TabbarItem,Icon, Popup , Dialog } from 'vant'

export default {
    name: "bottom",
    props: {

    },
    data() {
        return {
            active: this.$store.state.Tabbar_index,
            kefu_show: false,
            s_show: false
        }
    },
      mounted() {

          // let fullPath = this.$route.path
          // switch (fullPath) {
          //     case '/index':
          //         this.$store.commit('Tabbar_index',0)
          //         this.active = 0
          //         break;
          //     case '/gouwuche':
          //         this.$store.commit('Tabbar_index',1)
          //         this.active = 2
          //         break;
          //     case '/person':
          //         this.$store.commit('Tabbar_index',1)
          //         this.active = 3
          //         break;
          //     default:
          //         this.$store.commit('Tabbar_index',2)
          //         this.active = 1
          //         break;
          // }
      },
      methods: {
        tabbar_switch(index) {
          if(index != 1){
              this.$store.commit('Tabbar_index',index)
          }
          else{
              this.active = this.$store.state.Tabbar_index
          }

        },
          fun_kefu() {
              this.s_show = true
              this.kefu_show = true
          },
          fun_kefu_x() {
              this.s_show = false
              this.kefu_show = false
          }
      },
      components: {
        [Tabbar.name]: Tabbar,
        [TabbarItem.name]: TabbarItem,
        [Icon.name]: Icon,
        [Popup.name]: Popup,
        [Dialog.name]: Dialog,
        kefu
      }
}
</script>

<style scoped lang="less">
.tanchu{
    padding: 20px 0 0;
    h5{
        text-align: center;
        font-size: 18px;
        margin-bottom: 20px;
    }
    h6{
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: normal;
        display: flex;
        justify-content: center;
        img{
            width: 20px;
            height: 20px;
        }
    }
    & > article{
        text-align: center;
        margin-bottom: 20px;
        img{
            width: 210px;
            height: 260px;
        }
    }
    section{
        display: flex;
        font-size: 14px;
        line-height: 50px;
        text-align: center;
        article{
            width: 50%;
        }
        & > article:last-child{
            color: #33D333;
        }

    }

}
</style>
<style>
    .van-tabbar--fixed{
        background-image: linear-gradient( to bottom ,#3a3a3a, #111111);
        height: 1.5rem;
    }
    .van-tabbar-item--active{
      background-image: linear-gradient( to bottom ,#3a3a3a, #111111);
    }
	
    .van-tabbar-item__icon img{
        height: .6rem;
        margin-bottom: 6px;
    }
    [class*='van-hairline']::after{
        display: none;
    }
	/deep/.van-tabbar-item--active{
		background-color: transparent !important;
	}
	/deep/.van-tabbar{
		background-color: transparent !important;
	}
</style>
